<template>
    <div class="musci-rank">
        <div class="rank-top">
            <div class="title"><slot name="titleText"></slot></div>
            <div class="link"><router-link to="/Find">更多<i class="iconfont icon-bofang"></i></router-link></div>
        </div>

        <div class="rank-part" ref="companyStyle" @touchstart="touchIn" @touchend="touchUp" @touchmove="touchOn">
            <ul class="rank-ul" :style="{width : ulWidth*this.newArr.length+'px','transform'  : `translateX(-${needMove}px)`,'transition': transition}">
                <li class="rank-li" :style="{width : liWidth+'px',margin : `0rem ${mg}px`}" v-for="item in newArr" :key="item.id">
                    <h3>{{item.name}}</h3>
                    <div class="rank-text" v-for="(element,index) in item.artists" :key="element.id">
                        <div class="img-part">
                            <img v-lazy="element.picUrl" alt="">
                        </div>

                        <span class="index">排名:{{index+1}}</span>

                        <div class="song-text">
                            {{element.name}}
                        </div>

                        <div class="toSonger">
                            <router-link to="/Find">
                                <span>查看歌手</span>
                            </router-link>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name : 'musicRank',
    data(){
        return{
            ulWidth : 0,
            liWidth : 0,
            mg : 0,
            newArr : [],
            transition : "transform 0.2s",
            limit : 0,
            touchMove : 0
        }
    },
    computed : {
        needMove(){
            let needMove = 0;
            needMove = this.limit*this.ulWidth+this.touchMove;
            return needMove;
        }
    },
    methods : {
        touchIn(e){
            this.touchFirst = e.changedTouches[0].pageX;
        },
        toNext(){
            this.limit++;
            this.limit = this.limit>=this.newArr.length ? this.newArr.length-1 : this.limit;
        },
        toPre(){
            this.limit--;
            this.limit = this.limit<0 ? 0 : this.limit;
        }
        ,
        touchUp(){
            let isChange = Math.abs(this.touchMove);
            if(isChange-this.ulWidth/2 >0) {
                if(this.touchMove>0){
                this.toNext()
                this.transition = "transform 0.2s";
                }else if(this.touchMove<0){
                this.toPre()
                this.transition = "transform 0.2s";
                }
            }
            this.transition = "transform 0.2s";
            this.touchMove = 0;
        },
        touchOn(e){
            this.transition = "none";
            this.touchMove = this.touchFirst-e.changedTouches[0].pageX
        }
    },
    mounted(){
         this.$nextTick(()=>{

                    this.ulWidth = this.$refs.companyStyle.offsetWidth;
                    this.liWidth = this.ulWidth*0.9;
                    this.mg = this.ulWidth*0.025

        })
    },
    created(){
        axios.defaults.withCredentials = true;
        axios.get("/api/toplist/artist/type=1").then(response=>{
            
            let obj = {};
            let arr = [];
            obj.name = "华语乐坛排行榜";
            obj.id = Symbol();
                for(let i = 0 ; i < 3 ; i++){
                    arr.push(response.data.list.artists[i])
                }
                obj.artists = arr
                this.newArr.push(obj)
        });

        axios.get("/api/toplist/artist/type=2").then(response=>{
            
            let obj = {};
            let arr = [];
            obj.name = "欧美歌手排行榜";
            obj.id = Symbol();
                for(let i = 0 ; i < 3 ; i++){
                    arr.push(response.data.list.artists[i])
                }
                obj.artists = arr
                this.newArr.push(obj)
        });

        axios.get("/api/toplist/artist/type=3").then(response=>{
            
            let obj = {};
            let arr = [];
            obj.name = "韩国歌手排行榜";
            obj.id = Symbol();
                for(let i = 0 ; i < 3 ; i++){
                    arr.push(response.data.list.artists[i])
                }
                obj.artists = arr
                this.newArr.push(obj)

        });

        axios.get("/api/toplist/artist/type=4").then(response=>{
            
            let obj = {};
            let arr = [];
            obj.name = "日本歌手排行榜";
            obj.id = Symbol();
                for(let i = 0 ; i < 3 ; i++){
                    arr.push(response.data.list.artists[i])
                }
                obj.artists = arr
                this.newArr.push(obj)

        });
    }
}
</script>

<style lang="scss" scoped>
    .musci-rank {
        width: 90%;
        margin: auto;
        padding: 2rem 0rem 4rem 0rem;
    }

    .rank-top {
        width: 100%;
        height: 1.5rem;
        margin: 0.5rem 0rem ;
        display: flex;
        justify-content: space-between;


        .title {
            text-align: left;
            font-size: 1.2rem;
            font-weight: bold;
        }

        .link {
            padding:0rem 0.3rem;
            line-height: 1.4rem;
            font-size: 0.6rem;
            border: 1px solid rgb(163, 163, 163);
            border-radius: 5rem;

            >a {
                color: #000;
                text-decoration: none;
                font-size: 0.8rem;
            }

            .iconfont {
                font-size: 0.8rem;
            }
        }
    }

    .rank-part {
        width: 100%;
        overflow: hidden;
    }

    .rank-ul {
        display: flex;
    }

    .rank-li {
        padding: 0.5rem;
        background: #33CCBB;
        border-radius: 0.5rem;
        color: #fff;

        >h3 {
            width: 100%;
            height: 2rem;
            font-size: 1.5rem;
            font-weight: bold;
            line-height: 2rem;
            text-align: center;
            white-space: nowrap;
		    /*溢出部分文字隐藏*/
		    overflow: hidden;
		    /*溢出部分省略号处理*/
		    text-overflow: ellipsis;
        }

        .rank-text {
            width: 100%;
            height: 5rem;
            display: flex;
            margin: 0.2rem 0rem;
            padding: 0rem 0.5rem;
            box-sizing: border-box;
        }

        .img-part {
            width: 4rem;
            flex-basis: 4rem;
            height: 5rem;
            border-radius: 0.5rem;
            overflow: hidden;
            position: relative;

            >img {
                width: 100%;
                height: auto;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                border-radius: 0.5rem;
            }
        }

        .index {
            display: block;
            text-align: center;
            width: 1rem;
            height: 5rem;
            line-height: 5rem;
            font-size: 1.1rem;
            font-weight: bold;
            flex: 1;
        }

        .song-text {
            height: 5rem;
            line-height: 5rem;
            font-size: 1rem;
            flex : 1;
            white-space: nowrap;
		    /*溢出部分文字隐藏*/
		    overflow: hidden;
		    /*溢出部分省略号处理*/
		    text-overflow: ellipsis;
            text-align: center;
        }
        
        .toSonger {
            flex: 0.8;
            height: 5rem;
            line-height: 5rem;
            text-align: center;
            >a {
                color: #fff;
                text-decoration: none;
                font-size: 0.6rem;
            }
        }

    }
</style>